<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹窗组件</title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			.pop_box{
				width: 100vw;
				height: 100vh;
				background: rgba(000, 000, 000, 0.5);
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.content_box{
				width: 30%;
				height: 30%;
				background-color: #ffffff;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 10px 12px 24px;
				max-width: 400px;
				min-width: 300px;
			}
			.tip_info{
				width: 100%;
				box-sizing: border-box;
				padding: 0px 30px;
				text-align: center;
			}
			button{
				font-size: 18px;
				padding: 4px 16px;
				border-radius: 4px;
				border: none;
				color: #ffffff;
			}
			button:not(:first-child){
				margin-left: 20px;
			}
			.but_ok{
				background-color: darkgreen;
			}
			.but_warn{
				background-color: darkorange;
			}
			.but_not{
				background-color: darkred;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table border="1" style="text-align: center;">
				<tr>
					<td>序号</td>
					<td>商品名称</td>
					<td>单价</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="(val,index) in goods" :key="index">
					<td>{{index+1}}</td>
					<td>{{val.title}}</td>
					<td>{{val.price}}</td>
					<td>{{val.chooseNum}}</td>
					<td>{{val.allPrice}}</td>
					<td>
						<button @[but.eventname]="handleClick(but.type)" :class="but.className" v-for="but in val.optConfig">{{but.text}}</button>
					</td>
				</tr>
			</table>
			<pop-center v-if="isShow" :pop-config="popConfig" v-model="isShow"></pop-center>
			
		</div>
	</body>
</html>
<script>
	const app = Vue.createApp({
		data(){
			const optConfig = [
				{
					text:'减少',
					className:{'but_warn':true},
					eventname:'click',
					type:1
				},
				{
					text:'增加',
					className:{'but_ok':true},
					eventname:'click',
					type:2
				},
				{
					text:'删除',
					className:{'but_not':true},
					eventname:'dblclick',
					type:3
				},
				{
					text:'修改',
					className:{'but_warn':true},
					eventname:'click',
					type:4
				}
			]
			return{
				goods:[
					{
						title:'茉莉花茶',
						price:30,
						chooseNum:0,
						allPrice:0,
						optConfig
					},
					{
						title:'龙井茶',
						price:30,
						chooseNum:0,
						allPrice:0,
						optConfig
					},
					{
						title:'大红袍',
						price:30,
						chooseNum:0,
						allPrice:0,
						optConfig
					}
				],
				// 控制弹窗是否显示
				isShow:false,
				popConfig:{
					text:'你确定要执行当前操作吗？',
					buts:[
						{
							text:'确认',
							className:{'but_ok':true},
							eventname:'click',
							type:'ok'
						},
						{
							text:'取消',
							className:{'but_warn':true},
							eventname:'click',
							type:'cancel'
						}
					]
				},
			}
		},
		methods:{
			handleClick(type){
				this.optType = type
				switch (type){
					case 1:
						break;
					case 2:
						break;
					case 3:
						this.isShow = true;
						this.popConfig.text = '你确定要删除此项吗？删除后无法恢复！'
						break;
					case 4:
						this.isShow = true;
						this.popConfig.text = '你确定要修改此项吗？'
						break;
					default:
						break;
				}
			},
		}
	})
	app.component('pop-center',{
		// 接受参数
		props: ['popConfig','modelValue'],
		mounted(){
			console.log(this.popConfig);
		},
		methods:{
			
		},
		// 模板
		template:
		`
			<div class="pop_box">
				<div class="content_box">
					<div class="close_but" @click="$emit('update:modelValue',false)">X</div>
					<div class="tip_info">{{popConfig.text}}</div>
					<div class="but_box">
						<button @[but.eventname]="handleClick(but.type)" :class="but.className" v-for="but in popConfig.buts">{{but.text}}</button>
					</div>
				</div>
			</div>
		`
	})
	const vm = app.mount('#app')
</script>